iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Mobile Development

Android開發系列 第 20

[Day20] 簡單的ListView_2

  • 分享至 

  • xImage
  •  

哈囉大家好,在前幾天的時候有示範了簡單的ListView,今天要來示範進階一點的ListView,那我今天會示範SimpleAdapter加上一點點客製化ListView Item的格式,廢話不多說那我們就開始吧!

首先一樣在activity_main裡面加上一個ListView元件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</LinearLayout>

在layout加上一個新的layout,這個layout要用來製作客製化的Item,在佈局裡面我加上了一個ImageView和一個TextView

listItem

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding ="10dp"
        >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/image"/>

        <TextView
            android:id="@+id/continent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="35sp"
            />

    </LinearLayout>


</LinearLayout>

MainActivity

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    ListView listView;
    SimpleAdapter simpleAdapter;
    String [] continent = {"北美洲","南美洲","亞洲","歐洲","非洲","大洋洲","南極洲"};
    int[] continent_image = {R.drawable.north_america,R.drawable.south_america,R.drawable.asia,R.drawable.europe
            ,R.drawable.africa,R.drawable.oceania,R.drawable.antarctica
    };
    List<Map<String,Object>> areas = new ArrayList<Map<String,Object>>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView = findViewById(R.id.listView);
        for (int i = 0; i< continent_image.length; i++){
            Map<String,Object> area = new HashMap<String, Object>();
            area.put("continent_image", continent_image[i]);
            area.put("continent",continent[i]);
            areas.add(area);
        }

        simpleAdapter = new SimpleAdapter(MainActivity.this,areas,R.layout.listitem,
                new String[]{"continent_image","continent"},new int[]{R.id.image,R.id.continent});

        listView.setAdapter(simpleAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this,"您點選的是:"+ continent[position],Toast.LENGTH_SHORT).show();
            }
        });
    }
}

在MainActivity方面和上次的差不多,一開始一樣使用了一個陣列裏面包含了七大洲,另外宣告了一個int陣列裡面包含了七張圖片分別對應了七大洲的位置。

然後以下是simpleAdapter裡面要放入的東西:

  • Context context : 要在哪裡執行
  • List: 指的是要帶入的資料
  • @LayoutRes int resource : 在這是只要使用的item格式的layout的位置
  • String[] from : 要帶入資料的key,在上面的程式碼對應到的就是"continent_image"和"continent"這兩個Key
  • @IdRes int[] to : 指的是key的值要帶入哪一個元件,在示範裡我是把"continent_image"的值帶入了R.id.image元件裡面,而"continent"的值帶入了R.id.continent元件裡面。

最後附上了圖片來源連結:
北美洲
南美洲
非洲
亞洲
南極洲
歐洲
大洋洲

那今天的示範就到這了,謝謝大家的觀看。


上一篇
[Day19]連接Google雲端並上傳檔案_3
下一篇
[Day21] 簡單的ListView_3
系列文
Android開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言